<template>
  <div class="card-component">
    <el-card
      :header="datas.showHeader ? datas.header : ''"
      :shadow="datas.shadow"
      :body-style="datas.bodyStyle"
      :style="{
        borderRadius: datas.borderRadius,
        backgroundColor: datas.backgroundColor,
        width: datas.width,
        height: datas.height
      }"
    >
      {{ datas.content }}
    </el-card>
    
  </div>
</template>

<script>
export default {
  name: 'card',
  props: {
    datas: {
      type: Object,
      required: true
    },
  },
}
</script>

<style scoped lang="less">
.card-component {
  width: 100%;
  height: 100%;
}
</style> 